import React from 'react'
import { Form, Icon, Input, Button,Row,Col, Radio,message } from 'antd';

import { SingUp } from '@/api/UserApi'
class Register extends React.PureComponent{
  state = {
    gender:1,
    loading:false
  }
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err,values) => {
      if(!err){
        this.setState({
          loading:true
        })
        SingUp(values).then(response => {
          const {data} = response
          if(data.code === 0){
            message.success('注册成功',3,()=>{this.props.history.push('/login')})
          }else{
            message.error(data.msg)
            this.setState({
              loading:false
            })
          }
        })

      }
    })
  }
  render(){
    const { getFieldDecorator } = this.props.form
    const { loading } = this.state
    console.log(loading);

    return (
      <div className="page-register">
        <Row type="flex" align="middle" className="page-register__row">
          <Col span={8} offset={7}>
          <div className="pagename">
            <h1>欢迎来到注册页面</h1>
            <Form className="page-register__from" onSubmit={this.handleSubmit}>
              <Form.Item>
                {
                  getFieldDecorator('username',{
                    rules:[
                      { required:true,message:'Please input your username' },
                      {
                        type:'email',
                        message:'请输入正确的邮箱地址'
                      }
                    ]
                  })(
                    <Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="Username"
                />
                  )
                }

              </Form.Item>
              <Form.Item>
                {
                  getFieldDecorator('password',{
                    rules:[
                      { required:true, message:'Please input your password' },
                      {
                        min: 6, message:'最少6位'
                      },
                      {
                        max:12,message:'最多12位'
                      }
                    ]
                  })(
                    <Input
                    prefix={<Icon type="lock" style={{color:'rgba(0,0,0,.25)'}}/>}
                    type="password" placeholder="Password"
                  />
                  )
                }
              </Form.Item>
              <Form.Item>
                {
                  getFieldDecorator('gender',{
                    rules: [
                      { required:true,message:'Please select your gender!' }
                    ],
                    initialValue: this.state.gender
                  })(<Radio.Group>
                    <Radio value={1}>男</Radio>
                    <Radio value={2}>女</Radio>
                  </Radio.Group>)
                }
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" className="page-register__form-button"
                    loading={loading}
                >注册</Button>
              </Form.Item>
            </Form>
          </div>
          </Col>
        </Row>
      </div>
    )
  }
}
export default Form.create()(Register)

